<template>
  <div style="width: 100%;height: 100%;" id="divS">
    <el-main style="width: 100%;height: 100%;">
      <el-card class="card1">
        <span style="color: #909399; font-size: 30px;">调查咨询</span>
        <el-select v-model="input2"  filterable placeholder="请选择/或输入"
                   style="width: 18%;float: right;margin-right: 20px" @change="selectBytypeOrInput"
                   remote  :remote-method="remoteMethodByContent"  >
          <el-option
              key="全部类型"
              label="全部类型"
              value="全部类型"
          >
          </el-option>
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.msg"
              :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button icon="el-icon-search" @click="selectByTheme" circle size="mini" style="margin-left: 95.5%;transform: translateY(-115%)"></el-button>
        <el-divider content-position="right">{{ this.$store.state.VueName }}</el-divider>
        <el-card class="box-card" shadow="hover" v-for="(item,index) in questData.rows" :key="index">
          <div slot="header" class="clearfix">
            <span><el-link style="font-size: 30px;color: #409EFF"
                           @click="inPaper(item.id)" v-html="highlight(item.theme,lightStr)">
            </el-link></span>
          </div>
          <div>
            <div style="height: 180px;width: 70%;
            float: left;overflow: hidden">
              <p style="font-size: 23px;width: 70%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden">{{ item.content }}</p>
              <br>
              <span>结束时间:{{ item.overTime.substring(0, 10) }}</span><br>
              <span>
                <el-badge :value='item.heatDegree' style="margin-top: 2%" >
                  <el-tag type="success">热度</el-tag>
                </el-badge>
                <el-tag style="transform: translate(40%,25%)" type="warning" >{{item.msg}}</el-tag>
              </span>

            </div>
            <div style="width: 29%;height: 200px;overflow: hidden;float: left"
                 v-if="is_video_img(item.fileSrc)=='1'"
            >
              <img :src="'http://192.168.200.128:8080/'+item.fileSrc"
                   style="width: 96%;margin: 0 auto"
              />
            </div>
            <div v-if="is_video_img(item.fileSrc)=='2'"
                 style=" width: 29%;height: 100% ;float: left"
            >
              <video :src="'http://192.168.200.128:8080/'+item.fileSrc"
                     style="width: 96%;height: 100%;
                      object-fit: fill"
                     autoplay="autoplay"
                     loop="loop"
                     controls="controls"
              >
              </video>
            </div>
          </div>
        </el-card>
        <div class="block" style="margin: 0 auto;transform: translate(50%,10px);">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              layout="prev, pager, next, jumper"
              :total="this.total"
              :page-size="5"
              :hide-on-single-page="true">
          </el-pagination>
        </div>
      </el-card>
    </el-main>
  </div>
</template>
<script>
export default {
  name: "question",
  methods: {
    inPaper(id) {
      //显示用户是否已经回答了该问卷
      if(this.$store.state.userId==null){ //没有用户登录时
        this.$store.state.userId = 0;// 赋值为0,标志没有用户登录
      }
      this.$http.get("question/judgeReplay/" + id +'/'+this.$store.state.userId).then(resp => {
        if (resp.flag) {
          this.$message.error("你已经回答了该问卷")
        }else{
          this.$router.push("/answerSheet/" + id)
          //用户查看问卷(无论用户回不回答问卷,热度都加1)
          this.$http.get("question/addHeatDegree/" + id).then(resp => {
            if (!resp.flag) {
              this.$message.error("热度加1失败")
            }
          })
        }
      })
    },
    is_video_img(str) {
      if (str == null) return 0;
      let strings = str.split('.');
      let string = strings[strings.length - 1];
      console.log(strings[1]);
      if (string == 'jpg' || string == 'png') {
        return 1;
      }
      if (string == 'mp4') {
        return 2;
      }
    },
    handleCurrentChange(current) {
      this.currentPage = current;
      this.queryAllData()
    },
    queryAllData() {
      this.$http.get("question/findAll/" + this.currentPage + "/5").then(resp => {
        if (resp.flag == true) {
          this.questData.rows = resp.data.rows;
          this.total = resp.data.total;
        }
      })
    },
    getTypeList() {
      this.$http.get('/type/all', null).then(resp => {
        console.log("flag" + resp.flag)
        if (resp.flag == true) {
          this.options = resp.data;
        } else {
          this.$message("数据初始化失败")
        }
      });
    },
    //通过类型查找
    selectByType() {
      this.$http.get('/question/findType/' + this.currentPage + "/3" + '/' + this.input2).then(resp => {
        if (resp.flag == true) {
          this.questData.rows = resp.data.rows;
          this.total = resp.data.total;
        } else {
          this.$message("数据初始化失败")
        }
      });
    },
    //通过输入框内容查找
    selectByTheme() {
      if (this.queryInfo != "全部类型") {
        //取得要高亮的字符串
        this.lightStr=this.queryInfo;
        this.$http.post('/question/findQuestionByTheme/' + this.queryInfo).then(resp => {
          if (resp.flag) {
            this.questData.rows = resp.data;
            this.total = resp.data.size;
            //将搜索框里的值变为搜索的值
            this.input2=this.queryInfo;
          } else {
            this.$message("数据初始化失败")
          }
        });
      }else {
        this.queryAllData();
      }
    },
    //选择类型遍历
    selectBytypeOrInput() {
      //搜索完毕切换类型时,高亮显示信息为空
      this.queryInfo="";
      this.lightStr="";
      if (typeof this.input2 == 'number') {
        this.selectByType();
      }else if(this.input2=='全部类型') {
        this.queryAllData();
      }
    },
    remoteMethodByContent(query) {
      if (query != "") {
        //赋值给搜索信息
        this.queryInfo=query;

      }
    },
    //高亮显示的方法
    highlight(item,highLight){
      return this.highLightTableMsg(item,highLight);
    },
    highLightTableMsg(msg,highLightStr){
      if (msg == null) {
        msg = ''
      }
      if (highLightStr == null) {
        highLightStr = ''
      }
      if (msg instanceof Object) {
        msg = JSON.stringify(msg)
      }
      if (highLightStr instanceof Object) {
        highLightStr = JSON.stringify(highLightStr)
      }
      if (!(msg instanceof String)) {
        msg = msg.toString()
      }
      if (!(highLightStr instanceof String)) {
        highLightStr = highLightStr.toString()
      }
      var htmlStr = ''
      if (highLightStr.length > 0) {
        if (msg.indexOf(highLightStr) !== -1) {
          assemblyStr(msg, highLightStr)

        } else {
          htmlStr = '<span>' + msg + '</span>'
        }
      } else {
        htmlStr = '<span>' + msg + '</span>'
      }
      function assemblyStr(msgAssembly, highLightAssembly) {
        if (msgAssembly.indexOf(highLightAssembly) !== -1) {
          var length = highLightAssembly.length
          var start = msgAssembly.indexOf(highLightAssembly)
          htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span style="color: red " >' + highLightAssembly + '</span>'
          msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
          assemblyStr(msgAssembly, highLightAssembly)
        } else {
          htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
        }
      }
      return htmlStr;
    }
  },
  data() {
    return {
      options: [{}],
      input2: '',
      questData: {
        rows: []
      },
      currentPage: 1,
      total: 0,
      queryInfo: "",
      lightStr:""

    }
  },
  created() {
    this.queryAllData();
    this.getTypeList();

  }
}
</script>

<style scoped>
.card1 {
  width: 80%;
  margin: 0 auto;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 96%;
  margin: 5px auto 0;
  height: 300px;
  box-shadow: 0px 0px 2px 3px #E4E7ED;
}

.box-card:hover {
  box-shadow: 0px 0px 2px 2px #409EFF;
  transform: scale(1.02)
}


</style>